(function($){

	//create global app parameters...
	var serverAddress = 'http://localhost' ,
		socket = null,

		tmplt = {
			user: [
				'<div user-id="${sip_user}" class="cf">',
					'<div class="user_id">${sip_user}</div>',
					'<div class="user_ip">${network_ip}</div>',
					'<div class="user_agent">${user_agent}</div>',
					'<div class="channels">',
						'<ul></ul>',
					'</div>',
				'</div>'
			].join(""),
			channel_info: [
				'<li channle-id="${uuid}" class="cf">',
					'<div class="fl message">${message}  </div><div class="fl callee_id">${callee_id}</div><div class="fr state">${state}</div>',
				'</li>'
			].join("")
		};

	//init call
	//insert the divs into the document
	function insertUsers(user_id, user_ip,user_agent,state)
	{
		var $html = $.tmpl(tmplt.user, {
			sip_user: user_id,
			network_ip: user_ip,
			user_agent: user_agent
		});
		if($('.showlist .user_list div[user-id="' + user_id + '"]').length == 0 ){
			$html.appendTo('.showlist .user_list');
		}			
	}

	function insertChannelInfo(call_id, uuid, message, callee_id,state){
		$html = $.tmpl(tmplt.channel_info, {
			uuid: uuid,
			message: message,
			callee_id: callee_id,
			state: state
		});
		$html.addClass('selected');
		if($('.showlist .user_list div[user-id="' +call_id+ '"]').length !== 0)
			$html.appendTo('.showlist .user_list div[user-id="' +call_id+ '"] .channels ul');
	}

	function deleteChannelInfo(callid,uuid){
		if($('.showlist .user_list div[user-id="' +callid+ '"]').length !== 0 ){
			
			$('li[channle-id="' +uuid+ '"]').remove();
			// if($('.showlist .user_list div[user-id="' +callid+ '"] .channels ul li[channel-id="' +uuid+ '"]').length !== 0){
			// 	alert(2);
			// }
			//$('.showlist .user_list div[user-id="' +callid+ '"] .channels ul li[channel_id="' +uuid+ '"]').remove();
		}
	}

	function updateChannelInfo(callid,uuid,state){
		if(callid.length == 8 ){
			callid = callid.replace('5934','');
		}

		// if($('.showlist .user_list div[user-id="' +callid+ '"] .channels ul li[channel_id="' +uuid+ '"]').length !== 0){
		// 		alert(1);
		// }
		//alert(1);
		$('li[channle-id="' +uuid+ '"] .state').html(state);
		//$('.showlist .user_list div[user-id="' +callid+ '"] .channels ul li[channel_id="' +uuid+ '"] .state').html(state);
	}

	function bindSocketEvent(){

		//on connect
		socket.on('connect',function(){
			//console.log('Connected\n');
			alert('client connected');
			socket.emit('connect',{my:'connected'});
		});

		//on user register
		socket.on('register', function(data){
			var user_id = data['from-user'];
			var user_ip = data['network-ip'];
			var user_agent = data['user-agent'];
			insertUsers(user_id,user_ip,user_agent);	
		});

		//on user unregister
		socket.on('unregister', function(data){
			//when user unregister we just make it fadeout
			alert(345);
		});

		socket.on('ch_create', function(data){
			//alert('create');
			insertChannelInfo(data.call_id, data.uuid,data.message,data.callee_id,data.state);
		});

		socket.on('ch_answer', function(data){
			//alert('answer');
			updateChannelInfo(data.call_id,data.uuid,data.state);
		});

		socket.on('ch_destroy',function(data){
			//alert('destory');
			deleteChannelInfo(data.call_id,data.uuid);
		});
		socket.on('mytest',function(data){
			//alert(data['news']);
		});

		socket.on('curCalls',function(data){
			for(var i =0, len = data.length; i<len; i++)
			{
				if(data[i].callstate == 'EARLY') continue;

				data[i].dest = data[i].dest.replace('5934','');

				insertChannelInfo(data[i].cid_num, data[i].call_uuid, "OUT", data[i].dest, data[i].callstate);
				

				/*
				if($('.showlist .user_list div[user-id="' +data[i].cid_num+ '"]').length == 0)
				{
					//caller is not belong to the pbx
					//so we change the sytle of the callee
					//$('.showlist div.user_list div[user_id="' +data.dest+ '"]').removeClass('idle');
					$('.showlist .user_list div[user-id="' +data[i].dest+ '"]').addClass('callee');
				}else{
				//$('.showlist div.user_list div[user_id="' +data.cid_num+ '"]').removeClass('idle');
					alert(data.cid_num);
					$('.showlist .user_list div[user-id="' +data[i].cid_num+ '"]').addClass('caller');
					if($('.showlist .user_list div[user-id="' +data[i].dest+ '"]').length != 0){
						//$('.showlist div.user_list div[user_id="' +data.dest+ '"]').removeClass('idle');
						alert(data.dest);
						$('.showlist .user_list div[user-id="' +data[i].dest+ '"]').addClass('callee');
					}
				}
				*/
			}			
		});


		//first load page
		socket.on('registrations', function(data){
			for(var i =0, len = data.length; i<len; ++i){
				var user_id = data[i].sip_user;
				var user_ip = data[i].network_ip;
				var user_agent = data[i].user_agent;
				var state = Math.floor(Math.random()*2);
				console.log(user_id+" "+user_ip+" \n");
				insertUsers(user_id,user_ip,user_agent,state);
			}
		});
	}

	//fired when the document ready
	$(function(){
		socket = io.connect(serverAddress);
		//bind socket event
		//those events are fired by server
		bindSocketEvent();
	});
})(jQuery);